I'm trying to implement infinite scrolling with ng-infinite-scroll

original html code

<div id="topMain" ng-if="util.data.results.length > 0" class='txnResults'>
            <ts-result row="row" data-last-result="$last"
                       data-result-section-values="util.data"
                       ng-repeat="row in util.data.results track by $index">
            </ts-result>
            <div 
             more codes
            </div>
</div>

I added 'infinite-scroll' and the following code to my controller

            $scope.numberToDisplay = 10;
            $scope.loadMore = function () {
                alert("loadmore " + $scope.numberToDisplay)
                if ($scope.numberToDisplay + 5 < vm.data.results.length) {
                    $scope.numberToDisplay += 5;
                } else {
                    $scope.numberToDisplay = vm.data.results.length;
                }
            };

and changed the html code to

<div id="topMain" ng-if="util.data.results.length > 0" class='txnResults'>
                <ts-result row="row" data-last-result="$last"
                           data-result-section-values="util.data"
                           ng-repeat="row in test = (util.data.results |limitTo:numberToDisplay) track by $index">
                </ts-result>
                <div 
                 more codes
                </div>
    </div>

so where should I call loadMore()? I tried to follow the sample code and <div infinite-scroll="loadMore()" infinite-scroll-distance="1"> but loadMore() got called in loop till numberToDisplay = length before the screen got popultaed.

 <div id="topMain" ng-if="util.data.results.length > 0" class='txnResults'>
                <div infinite-scroll="loadMore()" infinite-scroll-distance="1">
                    <ts-result row="row" data-last-result="$last"
                               data-result-section-values="util.data"
                               ng-repeat="row in test = (util.data.results |limitTo:numberToDisplay) track by $index">
                    </ts-result>
            </div>
                    <div 
                     more codes
                    </div>
        </div>

Any thoughts? Thanks!